<template>
<div class="comment">
  <div class="comment_title">
    用户评论
  </div>
  <div class="comment_list" v-for="item in comments" :key="item.id">
    <div class="comment_item">
      <div class="item_HR">
        <img :src="'https://imagev2.xmcdn.com/'+item?.smallHeader">
        <div class="text">
          <span class="name">
           {{ item.nickname }}
          </span>
          <p v-html="item.content"></p>
          <div class="bottom">
          <span class="hf">回复</span>
          <span class="hf time">{{ moment(item.updatedAt).format('YYYY-MM-DD')}}</span>
          <span class="hf right">{{ item.likes }}</span>
          <van-icon name="good-job-o"  size="16"/>
        </div>
        
        </div>
      </div>

    </div>
  </div>
</div>
</template>

<script setup lang="ts">
import { onMounted,ref } from 'vue';
import moment from 'moment'
import {reqCommonentsData} from '../../../api/detail/index'
import type {commontsType} from '../../../api/detail/type'
let props=defineProps<{
  id:number
}>();

let comments=ref<commontsType[]>([]);
onMounted(()=>{
  getCommonents();
});


//请求评论的功能函数
const getCommonents=async()=>{
  try {
    let res=await reqCommonentsData(props.id);
    if(res.ret==0){
      comments.value=res.data.comments;
      
    }
  } catch (error) {
    console.log(error);
    
  }
}




</script>

<style lang="less" scoped>
.comment_title {
color:#333;
font-size: 18px;
font-weight: 700;
font-family: PingFangSC-Semibold;
margin-bottom: 20px;
}
.comment_item {
  margin-bottom: 28px;
  img{
    width: 35px;
    height: 35px;
    border-radius: 50%;
  }
}
.item_HR {
  display: flex;
}
.name {
  color: #666;
  font-size: 14px;

}
.text{
  margin-left: 10px;
  p {
  color: #333;
  font-size: 14px;
  margin-top: 5px;
  vertical-align: middle;
  line-height: 20px;
  ::v-deep img {
    width: 20px;
	  height:20px;
  }

}
} 
.hf {
  font-size: 12px;
  color: #666;
  display: flex;
  flex-shrink: 0;
}
.bottom {
  display: flex;
  margin-top: 8px;
  line-height: 18px;

}
.time {
  margin-left: 5px;
}
.right {
  margin-left: 170px;
  margin-right: 3px;
}
</style>